<template>
  <div class="login-box">
    <!-- 通过:rules="loginFormRules"来绑定输入内容的校验规则 -->
    <el-form
      class="login-form"
      :rules="loginFormRules"
      ref="loginForm"
      :model="loginForm"
      label-position="right"
      label-width="auto"
      show-message
    >
      <el-divider content-position="left">
        <span class="login-title">欢迎登录 </span>
      </el-divider>

      <el-form-item label="用户名" prop="username">
        <el-col :span="22">
          <el-input type="text" v-model="loginForm.username"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-col :span="22">
          <el-input
            @keyup.native.enter="loginSubmit('loginForm')"
            type="password"
            v-model="loginForm.password"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loginSubmit('loginForm')"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { login, checkLoginRole } from "../../api/user";
import { getRole } from "../../assets/js/utils";
import baseMixin from "../../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  name: "login",
  data() {
    return {
      bodyBackgroundImage: "url(" + require("../../assets/back.jpg") + ")",
    };
  },
  mounted() {
    this.setBackgroundImg();
  },
  beforeDestroy() {
    this.delBackgroundImg();
  },
  methods: {
    setBackgroundImg() {
      document.body.style.backgroundImage = this.bodyBackgroundImage;
    },
    delBackgroundImg() {
      document.body.style.backgroundImage = "";
    },
    async login() {
      await login(this.loginForm)
        .then((res) => {
          let apiResponse = res.apiResponse;
          let code = apiResponse.code;
          let message = apiResponse.message;
          if (code === 404 || code === 201) {
            this.$message.error(message);
          } else {
            let user = apiResponse.data;
            let role = getRole(user.role);
            let token = res.token;
            apiResponse.data.role = role;
            sessionStorage.setItem("userInfo", JSON.stringify(apiResponse));
            sessionStorage.setItem("role", role);
            sessionStorage.setItem("token", token);
            this.$router.push("/adminIndex");
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 管理员的登录事件
    loginSubmit(formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          checkLoginRole(this.loginForm)
            .then((res) => {
              let code = res.code;
              let message = res.message;
              if (code === 201 || code === 403) {
                this.$message.error(message);
                this.$router.push("/admin");
              } else {
                this.login();
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
#userType {
  margin-bottom: 10px;
  margin-top: -5px;
}

body {
  background-size: cover;
}

.login-box {
  background: #fff;
  border: 1px solid #dcdfe6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px rgb(84, 92, 100);
}

.login-form {
  /* border-top: 0.5px solid #7d8b8c; */
  /* border-bottom: 0.5px solid #7d8b8c; */
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #409eff;
  font-size: 30px;
  font-weight: bold;
}
</style>